<template>
  <div ref="rank" class="rank-demo" />
</template>
<script setup>
// 引入echart和json数据
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const rank = ref(null)
// 设置echart数据
const setOption = () => {
  var myChart = echarts.init(rank.value)
  var option
  const sideData = [220, 182, 191, 36, 122, 150]
  option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '5%',
      bottom: '0%',
      right: '0%',
      containLabel: true
    },
    toolbox: {
      show: false,
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: ['农场1', '农场2', '农场3', '农场4', '农场5', '农场6'],
        axisLine: {
        // x轴线的颜色以及宽度
          show: true,
          lineStyle: {
            color: '#69BDAA60',
            width: 1,
            type: 'solid',
          },
        },
        axisLabel: {
          show: true,
          color: '#69BDAA',
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#86b7ac50'],
            width: 1,
            type: 'dashed'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
        // x轴线的颜色以及宽度
          show: true,
          lineStyle: {
            color: '#69BDAA60',
            width: 1,
            type: 'solid',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#86b7ac50'],
            width: 1,
            type: 'dashed'
          }
        },
        axisLabel: {
          show: true,
          color: '#69BDAA',
        },
      }
    ],
    series: [
      {
        name: '使用面积',
        tooltip: {
          show: false
        },
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#F5AA0F90' // 0% 处的颜色
            }, {
              offset: 0.6,
              color: '#F5AA0F60' // 60% 处的颜色
            }, {
              offset: 1,
              color: '#F5AA0F40' // 100% 处的颜色
            }

            ], false)
          }
        },
        data: sideData,
        barGap: 0,
      },
      {
        name: '使用面积',
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#F5AA0F' // 0% 处的颜色
            }, {
              offset: 0.6,
              color: '#F5AA0F60' // 60% 处的颜色
            }, {
              offset: 1,
              color: '#F5AA0F40' // 100% 处的颜色
            }], false)
          }
        },
        barGap: 0,
        data: sideData,
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: 'white',
            fontSize: 10
          }
        }
      },
      {
        name: '使用面积',
        tooltip: {
          show: false
        },
        type: 'pictorialBar',
        itemStyle: {
          borderWidth: 1,
          borderColor: '#0571D5',
          color: '#F5AA0F' // 控制顶部方形的颜色
        },
        symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
        symbolSize: ['20', '7'], // 第一个值控制顶部方形大小
        symbolOffset: ['0', '-4'], // 控制顶部放行 左右和上下
        symbolRotate: -16,
        symbolPosition: 'end',
        data: sideData,
        z: 3,
      }]
  }

  myChart.setOption(option, true)
}

onMounted(() => {
  if (rank.value) {
    setOption()
  }
})
</script>
<style lang="scss">
.rank-demo {
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:50%;
    margin-left:-50%;
    z-index:99;
}
</style>
